<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>插件使用示例</title>
<d:script id="jquery,om-ui" />
<d:script path="/static/om-ui/operamasks-ui-plugin.js" />
<d:css id="om-ui" />

<script type="text/javascript">
	$(document).ready(function() {
		initUI();
	});
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

</style>
</head>
<body>
<button class="ui-button" label="打开第二个对话框" fn="{onClick:function(){dialog2.open()}}"></button>
<button class="ui-button" label="打开第三个对话框" click="function(){dialog3.open()}"></button>
	<div id='dialog1' class="ui-dialog" draggable="false" modal="false" title="第一个对话框" resizable="false">
		<span class="ui-dialog-button" text=" 是否打开 " fn='{click:function(){alert("第一个是否打开:" + dialog1.isOpen());}}'></span>
		<span class="ui-dialog-button" text=" 关闭 " fn='{click:function(){dialog1.close();}}'></span>
		第一个对话框的内容
	</div>
	
	
	<div id='dialog2' class="ui-dialog" autoOpen=false draggable="false" modal="true" title="第二个对话框" resizable="false">
		<span class="ui-dialog-button" text=" 关闭 " fn='{click:function(){dialog2.close();}}'></span>
		第二个对话框的内容(默认是不可见的)
		<a class="ui-button" label="检查是否打开" fn="{onClick:function(){alert('第二个对话框是否打开:' +dialog2.isOpen())}}"></a>
	</div>
	
	<div id='dialog3' class="ui-dialog" autoOpen=false width="640" height="480" draggable="true" modal="true" title="第三个对话框(嵌套的iframe)" resizable="true" path="${ctx }/plugin-demo/buttonbar.jsp">
		<span class="ui-dialog-button" text=" 关闭 " click='function(){dialog3.close();}'></span>
	</div>
</body>
</html>